<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="icon" href="images/Favicon.png">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="css/fontello.css">
    <link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
    <link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
</head>

<body style="overflow: hidden">

<div class="wrapper hp_1">

    <div id="app">
        <div>
            <my-header></my-header>
        </div>
        <section class="form_popup">

            <div class="signup_form" id="signup_form">
                <div class="hd-lg">
                    <img src="images/logo.png" alt="">
                    <span>注册您的Oren帐户</span>
                </div>
                <!--hd-lg end-->
                <div class="user-account-pr">
                    <form onsubmit="return false;">
                        <div class="input-sec mgb25">
                            <input type="text" name="username" v-model="username" placeholder="用户名">
                            <label>字母AZ或az，数字0-9和下划线_</label>
                        </div>
                        <div class="input-sec">
                            <input type="email" name="email" v-model="email" placeholder="电子邮件地址">
                        </div>
                        <div class="input-sec">
                            <input type="Password" @blur="checkPsd" name="password" v-model="password" placeholder="密码">
                        </div>
                        <div class="input-sec">
                            <input type="password" @blur="checkPsd" ref="checkPsd" name="confirm-password"
                                   v-model="confirmPsd"
                                   placeholder="重新输入密码">
                        </div>
                        <div class="input-sec" style="color:red" v-if="checkStatus">
                            {{error}}
                        </div>
                        <!-- 	<div class="input-sec flatpickr">
                        <input type="number" name="date" class="flatpickr-input" placeholder="Select Date..." data-input>
                    </div> -->
                        <!-- 	<div class="chekbox-lg">
                        <ul>
                            <li>
                                <label>
                                    <input type="radio" name="gender" value="Male">
                                    <b class="checkmark"> </b>
                                    <span>男</span>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <input type="radio" name="gender" value="Female">
                                    <b class="checkmark"> </b>
                                    <span>女</span>
                                </label>
                            </li>
                        </ul>
                    </div> -->
                        <div class="input-sec mb-0">
                            <button type="button" @click="register">注册</button>
                        </div>
                        <!--input-sec end-->
                    </form>
                    <div class="form-text">
                        <p>By sIgning up you agree to Oren’s <a href="#" title="">Terms of Service</a> and <a href="#"
                                                                                                              title="">Privacy
                            Policy</a></p>
                    </div>
                </div>
                <!--user-account end--->
                <div class="fr-ps">
                    <h1>已经有账号了?<a href="login.html" title="" class="show_signup"> 在此登录。</a></h1>
                </div>
                <!--fr-ps end-->
            </div>
            <!--login end--->

        </section>
    </div>
    <!--form_popup end-->

</div>
<!--wrapper end-->


<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/flatpickr.js"></script>
<script src="js/script.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/header.js"></script>
<script src="js/axios.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                username: "",
                email: "",
                password: "",
                confirmPsd: "",
                error: "两次密码不相同",
                checkStatus: false,
            }
        },
        created() {
        },
        methods: {
            register() {
                if (!this.checkStatus) {
                    axios.post("http://localhost:11001/api/oauth/signup", {
                        "username": this.username,
                        "email": this.email,
                        "password": this.password
                    }).then(res => {
                        if (res) {
                            alert(res.data.msg)
                            location.href = "login.html"
                        }
                    })
                }
            },
            checkPsd() {
                if (this.password == this.confirmPsd) {
                    this.checkStatus = false;
                } else {
                    this.checkStatus = true;
                }
            }


        }
    })
</script>

</body>

</html>
